<template>
  <div id="bar" style="width: 100%; height: 400px; border: 1px solid red"></div>
</template>
<script setup>
import { onMounted, onBeforeUnmount, toRefs, getCurrentInstance } from "vue";
import * as echarts from "echarts";
import axios from "axios";

let barData = defineProps({
  barArr: {
    type: Array,
  },
});

let { barArr } = toRefs(barData);
// let { barArr } = barData;
const { proxy } = getCurrentInstance();

onMounted(() => {
  var chartDom = document.getElementById("bar");
  let myChart;
  axios
    .get("http://localhost:3000/echarts-thems/wonderland.project.json")
    .then((data) => {
      console.log(data.data);
      echarts.registerTheme("wonderland", data.data.theme);
      myChart = echarts.init(chartDom, "wonderland");

      // var chartDom = document.getElementById("bar");
      // var myChart = echarts.init(chartDom, "dark");
      var option;
      option = {
        // 标题组件，包含主标题和副标题。
        title: {
          text: "年度访问量",
          subtext: "---每月显示访问量---",
          left: "center",
          top: "0",
          textStyle: {
            fontSize: 24,
          },
          subtextStyle: {
            fontSize: 12,
          },
          show: true,
        },
        // 图例组件，控制标题
        legend: {
          show: false,
          left: "60%",
          textStyle: {
            fontSize: "24px",
          },
        },
        // 直角坐标系内绘图网格，单个 grid 内最多可以放置上下两个 X 轴，左右两个 Y 轴。
        grid: {
          // left: 0,
        },

        // 直角坐标系 grid 中的 x 轴
        xAxis: {
          type: "category",
          data: [
            "一月",
            "二月",
            "三月",
            "四月",
            "五月",
            "六月",
            "七月",
            "八月",
            "九月",
            "十月",
            "十一月",
            "十二月",
          ],
        },
        // 直角坐标系 grid 中的 y 轴
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "bar",
            type: "bar",
            data: [120, 200, 150, 80, 70, 110, 130, 220, 300, 450, 280, 70],
            showBackground: true,
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)",
            },
          },
        ],
      };

      // 模拟动态改变柱状图的数据
      option.series[0].data = barArr.value;

      option && myChart.setOption(option);
    });

  // 响应式
  window.addEventListener(
    "resize",
    function () {
      myChart.resize();
    },
    true
  ); // true 冒泡  false 捕获
});

onBeforeUnmount(() => {
  window.removeEventListener("resize", function () {
    myChart.dispose(); // 销毁echarts 防止内存泄漏
  });
});
</script>
